<!--
 * @Description: 新增会议
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-08-24 11:41:27
 * @LastEditTime: 2023-03-13 14:38:31
 * @FilePath: \cscec-pms-admin\src\components\Meeting\MeetingAdd.vue
-->
<template>
  <div>
    <!-- 表单 -->
    <a-card>
      <title-name :title="title !== null ? title : '会议发起'" />
      <custom-form
        ref="form"
        :is-validate="true"
        :edit-model="''"
        :rules="rules"
        :form="form"
        :form-list="formOption"
        :is-emit="false"
        @selectOrg="selectOrg"
      >
        <template
          v-for="item in formOption"
          v-slot:[item.keyName]="scoped"
        >
          <slot
            v-if="item.slot"
            :name="item.keyName"
            v-bind="scoped"
          />
        </template>
      </custom-form>
    </a-card>
    <!-- 表单 -->
    <!-- 参会人员 -->
    <a-card>
      <title-name title="参会人员" />
      <a-form-model-item
        label="参会者选择："
        prop="meetingEmployeeDTOList"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <!-- 操作 -->
        <div class="mb12">
          <a-button
            icon="plus"
            class="btn_right"
            type="primary"
            @click="openSelectPersonModal"
          >
            添加人员
          </a-button>
          <a-button
            icon="delete"
            type="danger"
            :disabled="selectedRowKeys.length < 1"
            @click="handleRemoveMore"
          >
            移除
          </a-button>
        </div>
        <!-- 操作 -->
        <!-- 统计选中项 -->
        <a-alert :show-icon="true">
          <template slot="message">
            <span style="margin-right: 12px">
              已选择:
              <a>
                <b>{{ selectedRowKeys.length }}</b>
              </a>
              项
            </span>
          </template>
        </a-alert>
        <!-- 统计选中项 -->
        <!-- 表格 -->
        <s-table
          ref="tableEmployee"
          table-layout="fixed"
          size="default"
          row-key="id"
          :columns="columns"
          :data="loadData"
          :alert="true"
          :row-selection="rowSelection"
          show-size-changer
          show-quick-jumper
          show-pagination="auto"
        >
          <span
            slot="actions"
            slot-scope="text, record, index"
          >
            <template>
              <a @click="handleRemove(index)">移除</a>
            </template>
          </span>
        </s-table>
        <!-- 表格 -->
      </a-form-model-item>
    </a-card>
    <!-- 参会人员 -->
    <div class="tool-btns page-btn-right-top">
      <a-button
        class="ml20"
        :loading="submitLoading"
        type="primary"
        @click="handleSubmit"
      >
        提交
      </a-button>
      <a-button
        class="ml20"
        @click="handleClose"
      >
        关闭
      </a-button>
    </div>
    <!-- 添加人员模态框 -->
    <!-- <dialog-edit
      ref="dialogEdit"
      :meeting-employee-d-t-o-list-data="form.employeeList"
      :visible.sync="visible"
      @confirm="addEmployee"
      @confirms="addEmployees"
    /> -->
    <SelectPerson
        ref="SelectPersonWithTree"
        headerTitle="添加参会人员"
        :unRepeatPerson="true"
        @confirm="addEmployees"
      />
    <!-- 添加人员模态框 -->
  </div>
</template>
<script>
import dialogEdit from '@/views/conference/standardConference/conferenceList/dialogEdit.vue'
import { columnsEmployee } from './model.js'
import training from '@/api/design/training'
import SelectPerson from '@/components/BComponents/BSelectPerson'
export default {
  name: 'MeetingAdd' + Date.now(),
  props: {
    // 表单
    form: {
      type: Object,
      default: () => {}
    },
    // 表单配置
    formOption: {
      type: Array,
      default: () => []
    },
    // 校验
    rules: {
      type: Object,
      default: () => {}
    },
    // 会议类型
    meetingType: {
      type: String,
      require: true
    },
    // 标题
    title:{
      type: String,
      default: null
    },
    paramsFormat:{
      type: Function,
      default: null
    }

  },
  components: {
    // dialogEdit
    SelectPerson
  },
  data() {
    return {
      // 表格选中项
      selectedRowKeys: [],
      // 表格复选
      rowSelection: {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys) => {
          this.selectedRowKeys = selectedRowKeys
        }
      },
      // 表头
      columns: columnsEmployee,
      // 添加人员模态框显示隐藏
      visible: false,
      // 提交loading
      submitLoading: false,
      // 接口
      training
    }
  },
  methods: {
    selectOrg(val) {
      this.$emit('selectOrg', val)
    },
    /**
     * @description: 参会人员表格数据加载方法
     * @param {Object} parameter 分页信息
     * @return {Promise} 接口Promise
     */
    loadData(parameter) {
      const vm = this
      try {
        return new Promise((resolve, reject) => {
          let obj = {}
          obj.currentPage = parameter.pageNo
          obj.pageSize = parameter.pageSize
          obj.totalPage = Math.ceil(vm.form.employeeList.length / parameter.pageSize)
          obj.totalSize = vm.form.employeeList.length
          obj.data = vm.form.employeeList || []
          resolve(obj)
        })
      } catch (error) {
        console.log(error)
      }
    },
    /**
     * @description: 人员表单单个添加
     * @param {object} e 人员
     * @return {Void}
     */
    addEmployee(e) {
      this.form.employeeList.push(e)
      this.$refs.tableEmployee.refresh(true)
    },
    /**
     * @description: 人员表单多个添加
     * @param {array} e 人员列表
     * @return {Void}
     */
    addEmployees(e) {
      e.forEach((item) => {
        this.form.employeeList.push(item)
      })
      this.$refs.tableEmployee.refresh(true)
    },
    /**
     * @description: 移除人员选中项
     * @param {void}
     * @return {void}
     */ handleRemoveMore() {
      // 若有选中项
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: '确定移除这些数据？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          for (let index = 0; index < that.form.employeeList.length; index++) {
            let item = that.form.employeeList[index]
            if (that.selectedRowKeys.includes(item.id)) {
              that.form.employeeList.splice(index, 1)
              index--
            }
          }
          that.$refs.tableEmployee.clearSelected()
          that.$refs.tableEmployee.refresh(true)
        }
      })
    },
    /**
     * @description: 提交
     * @param {void}
     * @return {void}
     */
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.employeeList.length > 0) {
            this.$confirm({
              title: '提示',
              content: '请确认是否要提交会议，提交成功后将给参会人推送参会通知',
              onOk: () => {
                this.submitLoading = true
                const form = this.$clone(this.form)
                form.employeeList = form.employeeList.map((el) => {
                  return {
                    userId: el.userId
                  }
                })
                form.meetingType = this.meetingType
                form.meetingTime = form.meetingTime.format ? form.meetingTime.format('YYYY-MM-DD HH:mm') : form.meetingTime
                delete form.deepenResultsText
                delete form.createTime
                delete form.createUser
                if(this.paramsFormat){
                  this.paramsFormat(form)
                }
                if(form.hasOwnProperty('deepenResultsList')){
                  form.deepenResultsList = this.form.deepenResultsList.map((el) => {
                    return {
                      designDeepenResultsId: el.id,
                      designDeepenResultsName: el.resultsName
                    }
                  })
                }
                return training
                  .insertSelective(form)
                  .then(({ code, message }) => {
                    if (code === 200) {
                      this.$message.success('新增成功')
                      this.handleClose()
                    } else {
                      this.$message.warning(message)
                    }
                  })
                  .finally(() => {
                    this.submitLoading = false
                  })
              }
            })
          } else {
            this.$message.warning('请选择参会人员')
          }
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    /**
     * @description: 关闭
     * @param {void}
     * @return {void}
     */
    handleClose() {
      this.$close()
    },
    /**
     * @description: 移除人员
     * @param {number} index
     * @return {void}
     */
    handleRemove(index) {
      this.form.employeeList.splice(index, 1)
      this.$refs.tableEmployee.refresh(true)
    },
    openSelectPersonModal() {
      const list = this.form.employeeList;
      this.$refs.SelectPersonWithTree.open(list)
    }
  }
}
</script>
<style lang="less" scoped>
</style>
